<table class="table l-alarm-rules-table">
    <colgroup>
        <col width="100%">
    </colgroup>
    <thead>
    <tr>
        <th>
            <div class="l-table-title">
                <div class="l-title-text">Alarm</div>
                <button class="btn btn-blue btn-sm l-add-button fas fa-plus" (click)="onClickAddBtn()"
                        [disabled]="!isApplicationSelected()"></button>
            </div>
            <div class="l-alarm-rules-th">
                <div>Rule Name</div>
                <div>User Group</div>
                <div>Threshold</div>
                <div>Type</div>
                <div></div>
            </div>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td style="padding: 0;">
            <div class="l-alarm-rules-tr-wrap">
                <ng-container *ngIf="showGuide(); else list">
                    <p class="l-guide">{{guideMessage}}</p>
                </ng-container>
                <ng-template #list>
                    <pp-alarm-rule-list
                            [alarmRuleList]="alarmRuleList"
                            [webhookEnable]="webhookEnable"
                            (outRemove)="onRemoveAlarm($event)"
                            (outEdit)="onEditAlarm($event)">
                    </pp-alarm-rule-list>
                </ng-template>
            </div>
        </td>
    </tr>
    </tbody>
</table>
<ng-container *ngIf="showPopup">
    <pp-alarm-rule-create-and-update
            [webhookList]="webhookList"
            [checkedWebhookList]="checkedWebhookList"
            [showWebhookLoading]="showWebhookLoading"
            [disableWebhookList]="disableWebhookList"
            [checkerList]="checkerList"
            [userGroupList]="userGroupList"
            [editAlarm]="editAlarm"
            [i18nLabel]="i18nLabel"
            [i18nFormGuide]="i18nFormGuide"
            [webhookEnable]="webhookEnable"
            (outUpdateAlarm)="onUpdateAlarm($event)"
            (outCreateAlarm)="onCreateAlarm($event)"
            (outClose)="onClosePopup()"
            (outShowHelp)="onShowHelp($event)"
            (outCheckWebhook)="onCheckWebhook($event)">
    </pp-alarm-rule-create-and-update>
</ng-container>
<ng-container *ngIf="errorMessage">
    <pp-server-error-message
            [message]="errorMessage"
            (outClose)="onCloseErrorMessage()">
    </pp-server-error-message>
</ng-container>
<pp-film-for-disable *ngIf="useDisable" [zIndex]="9" [marginWidth]="0"></pp-film-for-disable>
<pp-loading [showLoading]="showLoading" [zIndex]="20"></pp-loading>
